<template>
	<view class="ys">
		<y-header></y-header>
		<view class="userbody">
			<view class="pc">
				<y-bread :name="pageName"></y-bread>
			</view>
			<view class="usermain">
				<view class="left">
					<y-usermenu></y-usermenu>
				</view>
				<view class="right">
					<view class="orderlist-title">
						<text>{{pageName}}</text>
					</view>
					<view class="passwordbox">
						<view class="passinput-li">
							<view class="pass-title">
								{{$t('index.xjjf')}}:{{user_balance}},{{$t('index.bdjf')}}:{{user_balance4}},{{$t('index.sxf')}}：{{transfer_fee}}%
							</view>
						</view>
						<view class="passinput-li">
							<view class="pass-title">
								{{$t('index.jf')}}
							</view>
							<uni-data-select v-model="type" :localdata="typeRange" @change="changeType"
								:clear="false"></uni-data-select>
						</view>
						<view class="passinput-li">
							<view class="pass-title">
								{{$t('index.lx')}}
							</view>
							<uni-data-select v-model="transfer_type" :localdata="transferRange" @change="changeTransfer"
								:clear="false"></uni-data-select>
						</view>
						<view class="passinput-li">
							<view class="pass-title">
								{{$t('index.je')}}
							</view>
							<view class="pass-input">
								<uni-easyinput prefixIcon="locked" type="number" v-model="num"
									:placeholder="$t('index.qsrje')">
								</uni-easyinput>
							</view>
						</view>
						<view class="passinput-li" v-show="type == 1">
							<view class="pass-title">
								{{$t('index.skr')}}
							</view>
							<view class="pass-input">
								<uni-easyinput prefixIcon="locked" type="text" v-model="username"
									:placeholder="$t('index.qsrskrzh')">
								</uni-easyinput>
							</view>
						</view>
						<view class="passinput-li">
							<view class="pass-title">
								{{$t('index.zfmm')}}
							</view>
							<view class="pass-input">
								<uni-easyinput prefixIcon="locked" type="password" v-model="password"
									:placeholder="$t('index.qsrzfmm')">
								</uni-easyinput>
							</view>
						</view>
						<view class="pass-btn">
							<button :loading="loading" :disabled="loading" @click="transfer">{{$t('index.qr')}}</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getBasicConf
	} from "@/api/api.js"
	import {
		transfer,
		UserInfo
	} from "@/api/user.js"
	export default {
		data() {
			return {
				pageName: this.$t('index.hz'),
				num: '',
				username: '',
				password: '',
				loading: false,
				user_balance: 0,
				user_balance4: 0,
				transfer_fee: 0,
				type: 1,
				typeRange: [{
					value: 1,
					text: this.$t('index.xjjf'),
				}, {
					value: 4,
					text: this.$t('index.bdjf'),
				}],
				transfer_type: 1,
				transferRange: [{
					value: 1,
					text: this.$t('index.hz'),
				}, {
					value: 2,
					text: this.$t('index.zz'),
				}],
			}
		},
		onLoad() {
			this.user()
			this.getBasicConf()
		},
		methods: {
			changeType(e) {
				this.type = e
				if (e == 4) {
					this.transfer_type = 1
					this.transferRange[1].disable = true
				} else {
					this.transferRange[1].disable = false
				}
			},
			changeTransfer(e) {
				this.transfer_type = e
			},
			getBasicConf() {
				getBasicConf().then(res => {
					this.transfer_fee = res.data.transfer_fee
				})
			},
			user() {
				UserInfo().then(res => {
					if (res.code == 0) {
						this.user_balance = res.data.user.balance_1
						this.user_balance4 = res.data.user.balance_4
					}
				})
			},
			transfer() {
				if (this.num == '') {
					uni.$showMsg(this.$t('index.zsrzzje'))
					return
				}
				if (this.type == 1 && this.username == '') {
					return uni.$showMsg(this.$t('index.qsrskrzh'))
				}
				if (this.password == '') {
					uni.$showMsg(this.$t('index.srmm'))
					return
				}
				this.loading = true
				transfer({
					num: this.num,
					coin: this.coin,
					type: this.type,
					transfer_type: this.transfer_type,
					username: this.username,
					password: this.password,
				}).then(res => {
					uni.$showMsg(res.msg)
					if (res.code == 0) {
						this.num = this.username = this.password = ''
					}
					this.loading = false

				})
			}
		}
	}
</script>

<style lang="scss">
	.userbody {
		max-width: 1180px;
		margin: 0 auto;
		margin-top: 20px;
		padding: 10px;
		box-sizing: border-box;
	}

	.usermain {
		display: flex;
		justify-content: space-between;

		.left {
			box-sizing: border-box;
			width: 25%;
			max-width: 265px;
			margin-top: 20px;
			margin-bottom: 20px;
		}

		.right {
			box-sizing: border-box;
			width: 75%;
			padding-right: 1%;
			margin-top: 20px;
			margin-bottom: 20px;

			.orderlist {
				margin-top: 15px;
			}

			.orderlist-title {
				font-size: 22px;
				border-left: 3px solid #4a4e5c;
				padding-left: 7px;
			}

			.passwordbox {
				line-height: 2;
				border: 1px solid #dddddd;
				padding: 40px 15%;
				margin-top: 20px;

				.passinput-li {
					.pass-title {
						text-align: left;
						font-size: 14px;
						color: #333333;
						margin-bottom: 10px;
					}

					.pass-input {
						margin-bottom: 10px;
						height: 40px;
						line-height: 40px;
					}
				}

				.pass-btn {
					margin-top: 40px;
					margin-bottom: 20px;

					button {
						border-radius: 4.5px;
						font-size: 14px;
						text-align: center;
						box-sizing: border-box;
						display: inline-block;
						background-color: #ff5353;
						color: #ffffff;
						cursor: pointer;
						border: 1px solid #ff5353;
						width: 100%;
						height: 40px;
						line-height: 40px;
					}
				}
			}
		}
	}

	@media (max-width:768px) {
		.usermain {
			.left {
				display: none;
			}

			.right {
				width: 100%;
				padding: 0;

				.passwordbox {
					padding: 40px 5%;
				}
			}
		}

		.pc {
			display: none;
		}
	}
</style>